<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    :close-on-click-modal="false"
    destroy-on-close
    :z-index="10"
    append-to-body
  >
    <div class="target-location-dialog">
      <div class="search-bar-location">
        <div class="search-item">
          <span class="label">货位编码</span>
          <el-input v-model="locationSearch.locationCode" placeholder="请输入货位编码"></el-input>
        </div>
        <el-button type="primary" @click="searchLocations">查询</el-button>
        <el-button @click="resetLocationSearch">重置</el-button>
      </div>
      
      <el-table
        ref="locationTableRef"
        :data="locations"
        border
        style="width: 100%"
        v-loading="locationsLoading"
        @row-click="handleLocationRowClick"
        @selection-change="val => selectedLocation = val.length > 0 ? val[0] : null"
      >
        <!-- <el-table-column width="55"></el-table-column> -->
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column label="货位名称" prop="locationName" min-width="150"></el-table-column>
        <el-table-column label="货位类型" prop="locationType" min-width="150"></el-table-column>
      </el-table>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <!-- <el-button 
          type="success" 
          @click="handleApplyToAll" 
          v-if="selectedLocation && (isBatchMode ? hasSelectedItems : true)"
        >
          {{ isBatchMode ? '应用到选中商品' : '应用到所有商品' }}
        </el-button> -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '货位选择'
  },
  isBatchMode: {
    type: Boolean,
    default: false
  },
  hasSelectedItems: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([
  'update:visible', 
  'search', 
  'cancel', 
  'confirm', 
  'apply-all', 
  'row-click'
])

// 同步父组件的visible状态
const dialogVisible = ref(props.visible)
watch(() => props.visible, (val) => {
  dialogVisible.value = val
})
watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
})

// 货位搜索相关变量
const locationSearch = reactive({
  locationCode: ''
})
const locations = ref([])
const locationsLoading = ref(false)
const selectedLocation = ref(null)
const locationTableRef = ref(null)

// 处理搜索按钮点击
const searchLocations = () => {
  emit('search', locationSearch)
}

// 重置搜索条件
const resetLocationSearch = () => {
  locationSearch.locationCode = ''
  emit('search', locationSearch)
}

// 处理货位行点击
const handleLocationRowClick = (row) => {
  selectedLocation.value = row
  
  // 自动勾选当前行
  if (locationTableRef.value) {
    // 先取消所有选择
    locations.value.forEach(item => {
      if (item.id !== row.id) {
        locationTableRef.value.toggleRowSelection(item, false)
      }
    })
    // 选中当前行
    locationTableRef.value.toggleRowSelection(row, true)
  }
  
  // 通知父组件行点击事件
  emit('row-click', row)
}

// 取消选择
const handleCancel = () => {
  dialogVisible.value = false
  emit('cancel')
}

// 确认选择
const handleConfirm = () => {
  if (!selectedLocation.value) {
    ElMessage.warning('请选择一个货位')
    return
  }
  
  emit('confirm', selectedLocation.value)
  dialogVisible.value = false
}

// 应用到所有或选中的项目
const handleApplyToAll = () => {
  if (!selectedLocation.value) {
    ElMessage.warning('请先选择一个货位')
    return
  }
  
  const message = props.isBatchMode 
    ? `确定要将货位 ${selectedLocation.value.locationName} 应用到已选择的商品吗？` 
    : `确定要将货位 ${selectedLocation.value.locationName} 批量设置给所有商品吗？`
  
  ElMessageBox.confirm(message, '批量设置', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    emit('apply-all', selectedLocation.value)
    dialogVisible.value = false
  }).catch(() => {
    // 用户取消操作
  })
}

// 设置组件方法，供父组件调用
const setData = (data) => {
  locations.value = data
}

const setLoading = (loading) => {
  locationsLoading.value = loading
}

const clearSelection = () => {
  selectedLocation.value = null
  if (locationTableRef.value) {
    locationTableRef.value.clearSelection()
  }
}

// 暴露方法给父组件
defineExpose({
  setData,
  setLoading,
  clearSelection
})
</script>

<style lang="scss" scoped>
.target-location-dialog {
  .search-bar-location {
    width: 70%;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 20px 0px;
    
    .search-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      
      .label {
        margin-right: 10px;
        white-space: nowrap;
      }
      
      .el-input {
        width: 200px;
      }
    }
    
    .el-button {
      margin-left: 10px;
    }
  }
  
  :deep(.el-table__row) {
    cursor: pointer;
    
    &:hover {
      background-color: #f0f9eb;
    }
  }
}
</style> 